<template>
  <div class="search-box">
    <!-- 顶部输入框 -->
    <div class="input-box">
      <div class="address-date">
        <div class="address" @click="selectAddress()">{{ filterData.cityName }}</div>
        <div class="date">
          <Calendar
            @confirm="handleConfirm"
            :dDate="{
              startDate: hotelSearch.searchInfo.startDate,
              endDate: hotelSearch.searchInfo.endDate,
            }"
          >
            <div class="type">
              住
              <span>{{ dateShort.startDateShort }}</span>
            </div>
            <div class="type">
              离
              <span>{{ dateShort.endDateShort }}</span>
            </div>
          </Calendar>
        </div>
      </div>
      <div class="input">
        <wd-input
          custom-class="custom-search-input"
          v-model="filterData.searchText"
          placeholder="贵阳市的景点、地标、房源"
          clearable
          no-border
        />
      </div>
    </div>

    <!-- 下拉面板 -->
    <view @click="closeOutside" class="drop-menu">
      <wd-drop-menu>
        <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
        <wd-drop-menu-item :title="priceTitle">
          <div class="p-30rpx">
            <wd-slider
              v-model="value2"
              :max="1000"
              :min="0"
              :step="10"
              active-color="#1F2026"
              @dragend="handleChange2"
            />
          </div>
        </wd-drop-menu-item>
        <wd-drop-menu-item v-model="value3" :options="option3" @change="handleChange3" />
        <wd-drop-menu-item v-model="value4" :options="option4" />
      </wd-drop-menu>
    </view>
  </div>
</template>
<script lang="ts" setup>
import { useHotelSearch } from '@/store/hotelSearch'
import dayjs from 'dayjs'
import { useQueue } from 'wot-design-uni'

defineOptions({
  name: 'SearchInput',
})

const emits = defineEmits(['search'])

const hotelSearch = useHotelSearch()

// 填充默认数据
const filterData = reactive({
  startDate: '',
  endDate: '',
  cityName: '大理',
  searchText: '',
})

const dateShort = reactive({
  startDateShort: '',
  endDateShort: '',
})

if (hotelSearch.searchInfo.cityName) {
  filterData.cityName = hotelSearch.searchInfo.cityName
}
if (hotelSearch.searchInfo.searchText) {
  filterData.searchText = hotelSearch.searchInfo.searchText
}

// 日期确认
function handleConfirm(dateInfo) {
  filterData.startDate = dateInfo.startDate
  filterData.endDate = dateInfo.endDate
  dateShort.startDateShort = dayjs(dateInfo.startDate).format('MM.DD')
  dateShort.endDateShort = dayjs(dateInfo.endDate).format('MM.DD')
}

function selectAddress() {
  uni.navigateTo({
    url: '/pages/home/region/index',
    events: {
      getBackData(data) {
        filterData.cityName = data.backData
      },
    },
  })
}

watch(
  () => filterData,
  () => {
    hotelSearch.setSearchInfo(filterData)
    emits('search')
  },
  { deep: true },
)

const { closeOutside } = useQueue()
const value1 = ref<number>(0)
const priceTitle = ref<string>('价格范围')
const value2 = ref<number[]>([0, 1000])
const value3 = ref<number>(0)
const value4 = ref<number>(0)

const option1 = ref<Record<string, any>>([
  { label: '推荐排序', value: 0 },
  { label: '距离排序', value: 1 },
  { label: '价格排序', value: 2 },
])
const option3 = ref<Record<string, any>>([
  { label: '位置区域', value: 0 },
  { label: '砖石广场', value: 1 },
  { label: '万达广场', value: 2 },
  { label: '世纪金源', value: 3 },
])
const option4 = ref<Record<string, any>>([
  { label: '筛选条件', value: 0 },
  { label: '单人间', value: 1 },
  { label: '双人间', value: 2 },
  { label: '三人间', value: 3 },
])

function handleChange1({ value }) {
  console.log(value)
}
function handleChange2({ value }) {
  priceTitle.value = value[0] === 0 && value[1] === 1000 ? `价格范围` : `${value[0]}-${value[1]}元`
}

function handleChange3({ value }) {
  console.log(value)
}
</script>
<style lang="scss" scoped>
.search-box {
  box-sizing: border-box;
  width: 100vw;
  padding: 20rpx 30rpx 0;
  background-color: #fff;
  .input-box {
    display: flex;
    height: 70rpx;
    background-color: var(--bgc4);
    border-radius: 8rpx;
    .address-date {
      display: flex;
      align-items: center;
      padding: 0 16rpx;
      border-right: 1px solid #fff;
      .address {
        max-width: 136rpx;
        overflow: hidden;
        font-size: 27rpx;
        color: var(--color1);
        word-break: keep-all;
      }
      .date {
        padding-left: 20rpx;
        font-size: 20rpx;
        color: var(--color4);
        .type {
          line-height: 24rpx;
          span {
            margin-left: 4rpx;
            color: var(--color1);
          }
        }
      }
    }
    .input {
      display: flex;
      flex: 1;
      align-items: center;
    }
  }

  :deep(.drop-menu) {
    // --wot-drop-menu-height: 40rpx;
    margin-top: 10rpx;
    --wot-drop-menu-item-color-active: var(--color1);
    --wot-drop-menu-item-color: var(--color3);
    .wd-drop-menu__item-title::after {
      // display: none;
      --wot-drop-menu-line-color: var(--color1);
    }
    .wd-slider__bar-wrapper {
      margin: 0 20rpx;
    }
  }
}
</style>
